<template>
  <el-drawer v-model="drawer" title="查看人员详情" size="50%">
    <el-row>
      <el-col :span="2" class="img">
        <el-avatar :size="50" :src="memberUserInfo.avatar" />
      </el-col>
      <el-col :span="20" class="info">
        <span class="info_item">{{ memberUserInfo.nickname }}</span>
        <span class="info_item">{{ memberUserInfo.phone }}</span>
        <Icon icon="svg-icon:sex_man" class="mr-5px" v-if="memberUserInfo.sex == 1" />
        <Icon icon="svg-icon:sex_woman" class="mr-5px" v-if="memberUserInfo.sex == 2" />
        <span class="info_item">id:{{ memberUserInfo.id }}</span>
        <br />
        <br />
        <span>最近消费时间：{{ memberUserInfo.recentConsumptionTime }}</span>
      </el-col>
    </el-row>
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane label="客户资料" name="first">
        <el-form :model="memberUserInfo">
          <el-card style="max-width: 100%" shadow="always">
            <template #header>
              <div class="card-header">
                <span>消费信息</span>
              </div>
            </template>

            <el-row>
              <el-col :span="8">
                <el-statistic title="美发未消费时间" :value="memberUserInfo.storeNotConsumptionDay">
                  <template #prefix>
                    <el-icon style="vertical-align: -0.125em">
                      <Timer />
                    </el-icon>
                  </template>
                </el-statistic>
              </el-col>
              <el-col :span="8">
                <el-statistic
                  title="美发累计消费"
                  :value="memberUserInfo.storeOrderPrice"
                  :precision="2"
                >
                  <template #prefix>
                    <el-icon style="vertical-align: -0.125em">
                      <Money />
                    </el-icon>
                  </template>
                </el-statistic>
              </el-col>
              <el-col :span="8">
                <el-statistic title="美发消费次数" :value="memberUserInfo.storeOrderCount">
                  <template #prefix>
                    <el-icon style="vertical-align: -0.125em">
                      <CreditCard />
                    </el-icon>
                  </template>
                </el-statistic>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-statistic title="到家未消费时间" :value="memberUserInfo.homeNotConsumptionDay">
                  <template #prefix>
                    <el-icon style="vertical-align: -0.125em">
                      <Timer />
                    </el-icon>
                  </template>
                </el-statistic>
              </el-col>
              <el-col :span="8">
                <el-statistic
                  title="到家累计消费"
                  :value="memberUserInfo.homeOrderPrice"
                  :precision="2"
                >
                  <template #prefix>
                    <el-icon style="vertical-align: -0.125em">
                      <Money />
                    </el-icon>
                  </template>
                </el-statistic>
              </el-col>
              <el-col :span="8">
                <el-statistic title="到家消费次数" :value="memberUserInfo.homeOrderCount">
                  <template #prefix>
                    <el-icon style="vertical-align: -0.125em">
                      <CreditCard />
                    </el-icon>
                  </template>
                </el-statistic>
              </el-col>
            </el-row>
          </el-card>
          <el-card style="max-width: 100%" shadow="always">
            <template #header>
              <div class="card-header">
                <span>基础信息</span>
              </div>
            </template>
            <el-row>
              <el-col :span="8">
                <el-form-item label="年龄">
                  {{ memberUserInfo.age }}
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="出生日期">
                  {{ memberUserInfo.birthdayStr }}
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="到家备注">
                  <el-input
                    v-model="memberUserInfo.homeRemark"
                    @blur="updateHomeRemark(memberUserInfo.id, memberUserInfo.homeRemark)"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="到店备注" prop="storeRemark">
                  <el-input
                    v-model="memberUserInfo.storeRemark"
                    @blur="updateStoreRemark(memberUserInfo.id, memberUserInfo.storeRemark)"
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </el-card>
        </el-form>
      </el-tab-pane>
      <!-- <el-tab-pane label="评分情况" name="second">Config</el-tab-pane> -->
      <el-tab-pane label="到家订单" name="second">
        <el-table :data="homeOrderList" :stripe="true" :show-overflow-tooltip="true">
          <el-table-column label="订单号" align="center" prop="code" />
          <el-table-column label="订单金额(元)" align="center" prop="price" />
          <el-table-column label="车费(元)" align="center" prop="fare" />
          <el-table-column label="所作项目" align="center" prop="projectNames" />
          <el-table-column
            label="下单时间"
            align="center"
            prop="createTime"
            :formatter="dateFormatter"
            width="180px"
          />
        </el-table>
        <Pagination
          :total="homeOrderTotal"
          v-model:page="homeOrderQueryParams.pageNo"
          v-model:limit="homeOrderQueryParams.pageSize"
          @pagination="getHomeOrderList"
        />
      </el-tab-pane>
      <el-tab-pane label="门店订单" name="third">
        <el-table :data="storeOrderList" :stripe="true" :show-overflow-tooltip="true">
          <el-table-column label="美发订单" align="center">
            <el-table-column label="订单号" align="center" prop="code" />
            <el-table-column label="门店" align="center" prop="storeName" />
            <el-table-column label="美发师" align="center" prop="userName" />
            <el-table-column label="实收总金额(元)" align="center" prop="actualPaymentCNY" />
            <el-table-column label="订单状态" align="center" prop="status">
              <template #default="scope">
                <dict-tag :type="DICT_TYPE.MEIJIA_STORE_ORDER_STATUS" :value="scope.row.status" />
              </template>
            </el-table-column>
            <el-table-column
              label="下单时间"
              align="center"
              prop="createTime"
              :formatter="dateFormatter"
              width="180px"
            />
          </el-table-column>
        </el-table>
        <Pagination
          :total="storeOrderTotal"
          v-model:page="storeOrderQueryParams.pageNo"
          v-model:limit="storeOrderQueryParams.pageSize"
          @pagination="getStoreOrderList"
        />
        <el-table :data="vipOrderList" :stripe="true" :show-overflow-tooltip="true">
          <el-table-column label="MVIP订单" align="center">
            <el-table-column label="订单号" align="center" prop="code" />
            <el-table-column label="实收总金额(元)" align="center" prop="actualPaymentCNY" />
            <el-table-column label="订单状态" align="center" prop="status">
              <template #default="scope">
                <dict-tag :type="DICT_TYPE.MEIJIA_STORE_ORDER_STATUS" :value="scope.row.status" />
              </template>
            </el-table-column>
            <el-table-column
              label="下单时间"
              align="center"
              prop="createTime"
              :formatter="dateFormatter"
              width="180px"
            />
          </el-table-column>
        </el-table>
        <Pagination
          :total="vipOrderTotal"
          v-model:page="vipOrderQueryParams.pageNo"
          v-model:limit="vipOrderQueryParams.pageSize"
          @pagination="getVIPOrderList"
        />
      </el-tab-pane>
    </el-tabs>
  </el-drawer>
</template>
<script setup lang="ts">
import { DICT_TYPE, getIntDictOptions, getStrDictOptions } from '@/utils/dict'
import { dateFormatter } from '@/utils/formatTime'
import * as CustomApi from '@/api/meijia/custom'
import { ChatLineRound, Calendar, Money, Timer, Scissor, CreditCard } from '@element-plus/icons-vue'
import { now } from 'lodash-es'
import * as HomeOrderApi from '@/api/meijia/home/order'
import * as StoreOrderApi from '@/api/meijia/store/order'
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
const memberUserInfo = ref<CustomApi.MemberUserVO>({
  id: 0,
  code: '',
  mobile: '',
  avatar: '',
  nickname: '',
  sex: 1,
  recentConsumptionTime: now(),
  storeNotConsumptionDay: 0,
  storeOrderPrice: 0,
  storeOrderCount: 0,
  homeNotConsumptionDay: 0,
  homeOrderPrice: 0,
  homeOrderCount: 0,
  age: 0,
  birthdayStr: '',
  homeRemark: '',
  storeRemark: ''
})
const activeName = ref('first')
const drawer = ref(false)
const tempHomeRemark = ref()
const tempStoreRemark = ref()
const homeOrderList = ref([]) // 订单列表
const homeOrderTotal = ref(0) // 订单列表的总页数
const homeOrderQueryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  code: undefined,
  memberCode: undefined
})
const storeOrderList = ref([]) // 订单列表
const storeOrderTotal = ref(0) // 订单列表的总页数
const storeOrderQueryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  code: undefined,
  memberCode: undefined
})
const vipOrderList = ref([]) // 订单列表
const vipOrderTotal = ref(0) // 订单列表的总页数
const vipOrderQueryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  code: undefined,
  memberCode: undefined
})
/** 打开弹窗 */
const open = async (id: number) => {
  drawer.value = true
  memberUserInfo.value = await CustomApi.getMemberUserDetail(id)
  tempHomeRemark.value = memberUserInfo.value.homeRemark
  tempStoreRemark.value = memberUserInfo.value.storeRemark
  homeOrderQueryParams.memberCode = memberUserInfo.value.code
  storeOrderQueryParams.memberCode = memberUserInfo.value.code
  vipOrderQueryParams.memberCode = memberUserInfo.value.code
  await getHomeOrderList()
  await getStoreOrderList()
  await getVIPOrderList()
}
const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab)
}
const updateHomeRemark = async (id: number, homeRemark: String) => {
  if (tempHomeRemark.value !== memberUserInfo.value.homeRemark) {
    await message.confirm('是否确认编辑备注')
    await CustomApi.updateHomeRemark(memberUserInfo.value)
    tempHomeRemark.value = memberUserInfo.value.homeRemark
  }
}
const updateStoreRemark = async (id: number, storeRemark: String) => {
  if (tempStoreRemark.value !== memberUserInfo.value.storeRemark) {
    await message.confirm('是否确认编辑备注')
    await CustomApi.updateStoreRemark(memberUserInfo.value)
    tempStoreRemark.value = memberUserInfo.value.storeRemark
  }
}
const getHomeOrderList = async () => {
  homeOrderQueryParams.payStatus = 1
  const homeOrderData = await HomeOrderApi.getPageByUser(homeOrderQueryParams)
  homeOrderList.value = homeOrderData.list
  homeOrderTotal.value = homeOrderData.total
}
const getStoreOrderList = async () => {
  storeOrderQueryParams.payStatus = 1
  storeOrderQueryParams.orderType = 0
  const storeOrderData = await StoreOrderApi.getByMemberPage(storeOrderQueryParams)
  storeOrderList.value = storeOrderData.list
  storeOrderTotal.value = storeOrderData.total
}
const getVIPOrderList = async () => {
  vipOrderQueryParams.payStatus = 1
  vipOrderQueryParams.orderType = 1
  const vipOrderData = await StoreOrderApi.getByMemberPage(vipOrderQueryParams)
  vipOrderList.value = vipOrderData.list
  vipOrderTotal.value = vipOrderData.total
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
</script>
<style scoped>
.el-select {
  width: 100%;
}
.info_item,
.mr-5px {
  margin-right: 10px;
}
.img {
  margin-left: 20px;
}
</style>
